<!-- 底部导航 -->
<template>
    <cover-view class="tabbar">
        <cover-view class="tabbar_box">
            <cover-view class="tabbar_item" 
                v-for="(tab, index) in tabbar" :key="tab.name"
                @tap="jump(tab.path,index)"
            >
                <cover-view class="img_box">
                    <cover-image class="tabbar_icon" 
                    :src="index == active  ? tab.activeImage : tab.image"
                    :class="tab.name == '' ? 'index' : '' "
                >
                </cover-image>
                </cover-view>
                <cover-view class="tabbar_text" 
                    v-if="tab.name" 
                    :class="index == active ? 'active' : ''"
                    >
                    {{tab.name}}
                </cover-view>
            </cover-view>
        </cover-view>
    </cover-view>
</template>

<script>
    import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
    export default {
        data() {
            return {
                tabbar:[
                    {
                        name: "商品",                                    // 标题
                        image: "/static/tabbar/goods.png",                 // 默认图片
                        activeImage: "/static/img/tab_01_selected.png",    // 选中图片
                        path: "/pages/goods_index/index"                      // 跳转路径
                    },
                    {
                        name: "商家",
                        image: "/static/img/tab_02.png",
                        activeImage: "/static/img/tab_02_selected.png",
                        "path": "/pages/store_index/index"
                    },
                    {
                        name: "",
                        image: "/static/img/tab_05.png",
                        activeImage: "/static/img/tab_05.png",
                        "path": "/pages/home_index/index"
                    },
                    {
                        name: "购物车",
                        image: "/static/img/tab_03.png",
                        activeImage: "/static/img/tab_03_selected.png",
                        "path": "/pages/cart_index/index"
                    },
                    {
                        name: "我的",
                        image: "/static/img/tab_04.png",
                        activeImage: "/static/img/tab_04_selected.png",
                        "path": "/pages/user_index/index"
                    },
                ],
                // active: 2
            }
        },
        computed: {
            ...mapState({
              active: state => state.init.tabbarActive,
          })
        },
        methods:{
            jump(path,params) {
                this.$store.dispatch('init/get_tabbarActive', params)
                // this.$Router.pushTab({
                //     path: path,
                //     params: params
                // })
				
				uni.switchTab({
					url: path
				})
            }
        },
        created() {
            
        },
        mounted() {
            
        }
    }
</script>

<style lang="scss">
    .tabbar {
		position:relative;
		z-index: 999;
        width: 100%;
        position: fixed;
        bottom: 0;
        background-color: #fff;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
        .tabbar_box {
            padding: 0 54rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
    .tabbar_item {
        height: 98rpx;
        .img_box {
            display: flex;
            justify-content: center;
            padding-top: 10rpx;
            padding-bottom: 14rpx;
            .tabbar_icon {
                width: 34rpx;
                height: 34rpx;
                padding-bottom: 4rpx;
            }
            .index {
                width: 80rpx;
                height: 80rpx;
            }
        }
        .tabbar_text {
            font-size: 22rpx;
            color: #999;
        }
        .active {
            color: #FF5445;
        }
    }
</style>
